<html lang="en" xml:lang="en"><head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><META name="description" content="Make widgets back compatible"><meta name="content-language" content="en"><link href="rsrc/htmlhelp.css" rel="stylesheet" type="text/css"><title>Web AppBuilder for ArcGIS | Help - 
Make widgets back compatible
</title>
                <script type="text/javascript" language="JavaScript">
                    var pathL  = self.location.pathname.split ("/");
                    var fname = pathL[pathL.length-1];
                    var i = fname.lastIndexOf (".htm");
                    if (i>=0) {
                    fname = fname.substring (0, i)
                    } else {
                    //??
                    }
                    if (self.location.hash) {
				    		      fname = fname + self.location.hash;
						        }
                    self.location.replace ("../index.html#//" + fname);
                </script>
                </head><!--Publication GUID: [GUID-E7D1C130-8F87-4109-8D61-E73A46083F52]--><!--Topic GUID: [GUID-20B0034D-4806-4BCF-87C5-BEF91D24EE98]--><body><div id="content"><div class="header"><h1>
Make widgets back compatible
</h1><div id="breadcrumb"></div></div>
<p id="GUID-2FD9E2E0-F49F-4B79-AE0C-34E7E278A12E">The widgets' configuration is stored in the app.  When a widget evolves with new functions, you need to modify the  configuration format. To make the widget back compatible with the previous configuration, you have two options: check the configuration format programmatically, or use VersionManager to upgrade the old format. The latter is strongly recommended due to the following advantages:</p><ul purpose="ul" id="UL_D4D24E5660594E7D90B4BC004913CFAE"><li purpose="li" id="LI_82014F7ACF124BA5AD6CAAC7CBAB7316"> The code is simpler, as it only processes the latest format.</li><li purpose="li" id="LI_8D5964AEA64E4AF2A0195901941E04F9">It is easier to track the changes, as they  are put into one version manager file.</li><li purpose="li" id="LI_18F91FD5F4F4497492A174D35BBB5B38">The  BaseVersionManager class can be inherited by completing the following steps: <p id="GUID-1E281803-CB52-48D9-8F78-8BA5FF835218"><ol purpose="ol" id="OL_74F32D96F5834CFE81DA91DA958AEBF7"><li purpose="li" id="LI_A9114E913A4943EFA1158B687345BECB">Add the “hasVersionManager” property to the widget manifest.json, and set it to true.<div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code>&quot;properties&quot;: {
  	&quot;hasVersionManager&quot;: true
  }
</code></pre></div>
</div></li><li purpose="li" id="LI_FA9E1219CDF54EA69842018C987A3C5C">Create a new file called “VersionManager.js”.<div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code><span class="nx">define</span><span class="p">([</span><span class="s1">&#39;jimu/shared/BaseVersionManager&#39;</span><span class="p">],</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">BaseVersionManager</span><span class="p">)</span> <span class="p">{</span>

  <span class="kd">function</span> <span class="nx">VersionManager</span><span class="p">(){</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">versions</span> <span class="o">=</span> <span class="p">[{</span>
      <span class="nx">version</span><span class="o">:</span> <span class="s1">&#39;1.0&#39;</span><span class="p">,</span>
      <span class="nx">upgrader</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oldConfig</span><span class="p">){</span>
        <span class="k">return</span> <span class="nx">oldConfig</span><span class="p">;</span>
      <span class="p">}</span>
    <span class="p">},{</span>
      <span class="nx">version</span><span class="o">:</span> <span class="s1">&#39;1.1&#39;</span><span class="p">,</span>
      <span class="nx">upgrader</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oldConfig</span><span class="p">){</span>
        <span class="kd">var</span> <span class="nx">newConfig</span> <span class="o">=</span> <span class="nx">oldConfig</span><span class="p">;</span>        
        <span class="k">return</span> <span class="nx">newConfig</span><span class="p">;</span>
      <span class="p">}</span>
    <span class="p">}];</span>
  <span class="p">}</span>

  <span class="nx">VersionManager</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BaseVersionManager</span><span class="p">();</span>
  <span class="nx">VersionManager</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">constructor</span> <span class="o">=</span> <span class="nx">VersionManager</span><span class="p">;</span>
  <span class="k">return</span> <span class="nx">VersionManager</span><span class="p">;</span>
<span class="p">});</span>
</code></pre></div>
</div></li></ol>
</p><p id="GUID-0EC2A530-FBF9-4210-8036-CE39B47CE896"> When inheriting from the BaseVersionManager class, keep the following rules in mind:   <ul purpose="ul" id="UL_9E2348FFBC5B4EF29873E548F5C5C129"><li purpose="li" id="LI_1B42588342F546D68A1E05E35D31ACC3">Because BaseVersionManager  runs in both browser and Node.js, and dojo classes are not imported into Node.js, any dojo classes should not be used. </li><li purpose="li" id="LI_12D47463522841889FF7B4E7D78A755A">Put all of your versions into the versions property.</li><li purpose="li" id="LI_27135EDB14E44B6686F001A0722DDB2F">For the upgrader function, the input is the old configuration and the output is the new configuration.</li></ul></p></li></ul>

<div class="footer"> Copyright © 1995-2016 Esri. All rights reserved. </div></div></body></html>